<template>
  <div class="maskCenter" v-show="isShowMessageBox">
	<div id="box" :class="visible?'open-content':'open-content-hide'" style="position: absolute;margin:auto;top:0;left:0;bottom:0;right:0;height:188px;width:555px;">
		<div class="header" v-movew>
				<span style="margin-left: 10px;">{{title}}</span>				
				<el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
					<span class="icon iconfont iconbiaoqianlan-guanbi close" @click="close"></span>
				</el-tooltip>
			</div>
		<div class="body" :class="{'inputbody':isShowInput,'noinputbody':!isShowInput}">			
			<span>{{ content }}</span>
	        <el-input class="systemInput" v-model="inputValue" v-if="isShowInput" ref="tinput" @keyup.enter="confirm" />	      	
		</div>
		<div class="footer">	
			<div class="systemButtonConfirm" style="margin-right: 20px;" @click="confirm" v-show="isShowConfimrBtn"><span>{{ confirmBtnText }}</span></div>
        	<div class="systemButtonCancel"  @click="cancel" v-show="isShowCancelBtn"><span>{{ cancelBtnText }}</span></div>			
		</div>
	</div>
</div>
  
  
  
</template>
 
<script>
  import movew from '@/directives/winmove'
  export default {
  	directives: { movew},
    props: {
      title: {
        type: String,
        default: '消息'
      },
      content: {
        type: String,
        default: '提示信息'
      },
      isShowInput: {
      	default: false
      },
      inputValue: {default:''},
      isShowCancelBtn: {
        type: Boolean,
        default: true
      },
      isShowConfimrBtn: {
        type: Boolean,
        default: true
      },
      cancelBtnText: {
        type: String,
        default: '取消'
      },
      confirmBtnText: {
        type: String,
        default: '确定'
      }
    },
    data () {
      return {
        isShowMessageBox: false,
        visible:false,
        resolve: '',
        reject: '',
        promise: '',// 保存promise对象
        res:{
        	value: '',
					type:'confirm',
					action: false
        }
      };
    },
    watch:{
    	isShowInput(){
    		this.$nextTick(()=>{
    			if(this.isShowInput){
    				this.$refs.tinput.$refs.input.focus();
    			}    			
    		})    	
    	},    
		},
		created() {
			var _self = this
	    document.onkeydown = function(e) {
		  var key = window.event.keyCode
	      if (key == 13) {
	      	if(this.isShowMessageBox){
	      		_self.confirm()
	      	}	        
	      }
	    }
		},
    methods: {
      // 确定,将promise断定为resolve状态
      confirm: function () {
      	this.visible = false;
      	setTimeout(() => {
      		this.isShowMessageBox = false;
      		this.res.type = 'confirm';
      		this.res.action= true;
      		this.res.value = this.inputValue;
	        this.resolve(this.res);
	        this.remove(); 
      	});
        
      },
      // 取消,将promise断定为reject状态
      cancel: function () {
      	this.visible = false;
      	setTimeout(() => {
	        this.isShowMessageBox = false;
	        this.res.type = 'cancel';
      		this.res.action= false;
      		this.res.value = this.inputValue;	        
	        this.reject(this.res);
	        this.remove();
        },300);
      },
      close:function(){
      	this.visible = false;
      	setTimeout(() => {
	        this.isShowMessageBox = false;	  
	        	this.res.type = 'close';
	      		this.res.action= false;
	      		this.res.value = this.inputValue;	        
		        this.reject(this.res);
	        this.remove();
        },300);
      },
      // 弹出messageBox,并创建promise对象
      showMsgBox: function () {      	
        this.isShowMessageBox = true;
        this.visible = true;
        this.promise = new Promise((resolve, reject) => {
          this.resolve = resolve;
          this.reject = reject;
        });
        // 返回promise对象
        return this.promise;
      },
      remove: function () {
        setTimeout(() => {
          this.destroy();
        }, 300);
      },
      destroy: function () {      	
        this.$destroy();
        document.body.removeChild(this.$el);
        
      }
    }
  };
</script>
 
<style scoped>
	.maskCenter{
		z-index: 999;
	}

	.header {
		display: flex;
		justify-content: space-between;
		height: 40px;
		line-height: 40px;
		background: var(--win-head-back-color);
		margin: 4px;
		text-align: left;
	}
	.header .title {
		width: calc(100% - 25px);		
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: var(--system-page-topbar-text-color);
		margin-left: 12px;
	}
	.header .close {
		font-size: 12px;
		width: 12px;
		height: 12px;
		margin-right: 9px;
	}

	.body {		
		flex-direction: row;
		width: 100%;
		padding: 0px 30px;
		height: calc(100% - 118px);		
		color: var(--page-lable-text-color);
		overflow: hidden;
		margin: 12px 0px;
		
		
	}
	.noinputbody{
		line-height: 70px;
	}
	.inputbody{
		line-height: 32px;
	}
	/*表单背景宽高设置*/
	.open-content {			
		overflow: hidden;
		animation: myscale 0.4s;
		font-size:16px;
		font-family:Microsoft YaHei;
		font-weight:400;		
		background: var(--win-page-back-color);		
		/* box-shadow:0px 10px 20px 0px var(--win-page-shadow-color), 0px -10px 20px 0px var(--win-page-shadow-color); */
		border-radius:4px;
	}

	/*表单打开动画*/
	@keyframes myscale {
		0% {
			opacity: 0;
			transform: scale(0.6);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	/*表单关闭样式及动画*/
	.open-content-hide {
		background: var(--win-page-back-color);		
		box-shadow:0px 10px 20px 0px var(--win-page-shadow-color), 0px -10px 20px 0px var(--win-page-shadow-color);
		border-radius:4px;
		overflow: hidden;
		animation: myscalehide 0.4s;
		transform: scale(0.6);
		opacity: 0;
	}

	@keyframes myscalehide {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(0.6);
		}
	}

	@keyframes fadeInLeft {
		0% {
			opacity: 0;
			transform: translateX(-120px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}	
		
	.row-content{
		margin-left: 15px;
		width: 227px;
	}
	/*element 输入框样式*/
	>>>.el-input__inner{		
		line-height: 32px;
		height: 32px;
		width: 227px;
		border:1px solid var(--input-border-color);
		border-radius:4px;
		color: var(--input-text-color);
		font-size:14px;
		font-family:Microsoft YaHei;
		font-weight:400;
	}
	/*element 下拉框*/
	>>>.el-input__inner:focus{		
		border:1px solid var(--input-focus-border-color);	
	}
	/*下拉框箭头*/
	>>>.el-select__caret {
		line-height: 32px;
	}
	>>>.el-select{
		width: 227px;
	}	
	/*element 输入框的 focus hover样式*/
	>>>.el-input__inner{
		width: 100%;
	}
	>>>.el-input__inner:focus,
	>>>.el-textarea__inner:focus {
		background: var(--input-focus-back-color);
		border: 1px solid var(--input-focus-border-color);
		border-radius: 4px;
	}
	
	>>>.el-input__inner:hover,
	>>>.el-textarea__inner:hover {
		background: var(--input-hover-back-color);
		border: 1px solid var(--input-focus-border-color);
	}
	>>>.el-textarea__inner{
		color: var(--input-text-color);
		font-size:14px;
		font-family:Microsoft YaHei;
		font-weight:400;
	}
	.footer {
		padding-right: 30px;
		height: 46px;
		line-height: 46px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		padding-bottom: 20px;
	}	
	.btnConfirm{
		text-align: center;		
	}
	
</style>